<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<style type="text/css">
			.surprise{
				width:100%;
				height: 100%;
				color: #FFFFFF;
				text-align: center;
				opacity: 0;
				-webkit-transform: scale(0);
				transform: scale(0);
				overflow: hidden;
				/*background: #EC492A;*/
				background: #EC492A;
				animation: fromback .6s ease-in-out forwards;
				
			}
			.surprise-info{
				padding-bottom: 10%;
				background: #d8000f;
				    border-radius:0px 0px 60% 60% / 0px 0px 13% 13%;
				overflow: hidden;
			}
			.surprise p{
				color: #FFFFFF;
				font-size: 1.3rem;
				padding: 1rem;
			}
			.surprise-img{
				width: 100%;
				height: auto;
				margin: 0 auto;
				border:none;
				overflow: hidden;
			}
			.surprise-img img{
				display: block;
				width: 100%;
				height: auto;
			}
			.surprise-name,.surprise-sub{
				text-align: center;
				color: #FFFFFF;
				font-size: 1.5rem;
				padding-top: 0.85em;
			}
			.btn-group{
				width: 80%;
				margin: 1rem auto;
				text-align: center;
			}
			#mobileNumber{
				font-size: 20px;
				text-align: center;
			}
			@-webkit-keyframes fromback{
				from{
					opacity: 0;
				-webkit-transform: scale(0);
				transform: scale(0);
				}
				to{
					opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
				}
			}
		</style>
	</head>
	<body>
		<div class="surprise">
			<div class="surprise-info">
			<div class="surprise-img">
				<img src="img/3.jpg"/>
			</div>
			<!--<div class="surprise-name">国内流量1G</div>-->
			<div class="surprise-sub">
				<p>恭喜你获得</p>
				<p>国内流量1G</p>
			</div>
			
			</div>
			<div class="btn-group">
				<input type="number" id="mobileNumber" value="" />
				<button class="mui-btn mui-btn-primary">充值</button>
			</div>
		</div>
	</body>
	<!--图片 名称 大小 输入框 按钮-->
</html>
